<template>
  <div class="qualityCheckTask">
    <div class="top">
      <!--<affix :label="$t('qualityCheck.qualityCheckTask')"></affix>-->
      <el-form :model="ruleForm" ref="ruleForm" label-position="top">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="$t('public.createTime')+':'">
              <el-date-picker size="mini"
                              :id="['l1','l2']"
                              style="margin-top:6px;width:100%;"
                              v-model.trim="ruleForm.date"
                              type="datetimerange"
                              :editable="false"
                              :picker-options="pickerOptions2"
                              :placeholder="$t('sms.choTimeScope')"
                              align="right">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('qualityCheck.checkWorker')+':'">
              <!-- <el-autocomplete
                class="quality-agents-select-option"
                v-model="ruleForm.QA_SPECIALIST"
                :fetch-suggestions="querySearch"
                size="mini"
                :placeholder="$t('public.pleaseEnter')"
              ></el-autocomplete> -->
              <m7Select :placeholder="$t('public.pickAgent')" class="el-select" filterable :options="selectAgents" v-model="ruleForm.QA_SPECIALIST"></m7Select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('qualityCheck.taskState')+':'">
              <el-select size="mini" style="width:100%;" v-model="ruleForm.hide" :placeholder="$t('public.pleasePick')">
                <el-option
                  :label="$t('public.all')"
                  :value="''">
                </el-option>
                <el-option
                  :label="$t('qualityCheck.using')"
                  value="true">
                </el-option>
                <el-option
                  :label="$t('qualityCheck.stoped')"
                  value="false">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <!--<div class="temp-search-wrap">-->
          <!--<span class="demonstration">{{$t('public.createTime')}}:</span><br>-->
          <!--<el-date-picker size="mini"-->
                          <!--id="qualityruleFormdate"-->
                          <!--class="el-input-time"-->
                          <!--v-model.trim="ruleForm.date"-->
                          <!--type="datetimerange"-->
                          <!--:editable="false"-->
                          <!--:picker-options="pickerOptions2"-->
                          <!--:placeholder="$t('sms.choTimeScope')"-->
                          <!--align="right">-->
          <!--</el-date-picker>-->
        <!--</div>-->
        <!--<div class="temp-search-wrap">-->
          <!--<span class="demonstration">{{$t('qualityCheck.checkWorker')}}:</span><br>-->
          <!--<el-autocomplete-->
            <!--class="quality-agents-select-option"-->
            <!--v-model="ruleForm.QA_SPECIALIST"-->
            <!--:fetch-suggestions="querySearch"-->
            <!--size="mini"-->
            <!--:placeholder="$t('public.pleaseEnter')"-->
          <!--&gt;</el-autocomplete>-->
        <!--</div>-->
        <!--<div class="temp-search-wrap">-->
          <!--<span class="demonstration">{{$t('qualityCheck.taskState')}}:</span><br>-->
          <!--<el-select size="mini" v-model="ruleForm.hide" :placeholder="$t('public.pleasePick')">-->
            <!--<el-option-->
              <!--:label="$t('public.all')"-->
              <!--:value="''">-->
            <!--</el-option>-->
            <!--<el-option-->
              <!--:label="$t('qualityCheck.using')"-->
              <!--value="true">-->
            <!--</el-option>-->
            <!--<el-option-->
              <!--:label="$t('qualityCheck.stoped')"-->
              <!--value="false">-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</div>-->
      </el-form>
      <div class="sub">
        <el-button class="primary_btn report_excel_btn" @click="reset">{{$t('public.reset')}}</el-button>
        <el-button type="primary" class="search primary_btn" @click= "queryBtn">{{$t('public.search2')}}</el-button>
      </div>
      <affix :label="$t('public.searchResult')"></affix>
    </div>
    <div class="table-wrap">
      <div class="deploy">
        <Pagination
          class="fr"
          :small="true"
          :currentPage="currentPage"
          :count="count"
          @turnPage="handleCurrentChange"
          :totalPage="Math.ceil(count/pageSize)"
        >
        </Pagination>
      </div>
      <el-table :data="tableData" style="width: 100%" v-loading="tableLoading" size="mini">
        <el-table-column prop="TASK_NAME" :label="$t('qualityCheck.taskName')">
        </el-table-column>
        <el-table-column prop="taskAllNum" :label="$t('qualityCheck.taskAccount')" width="90">
        </el-table-column>
        <el-table-column prop="ALREADY_MONITORING" :label="$t('qualityCheck.monitorAllNum')" width="90">
        </el-table-column>
        <el-table-column prop="WAIT_MONITORING" :label="$t('qualityCheck.toMonitorNum')" width="90">
        </el-table-column>
        <el-table-column prop="REPLACEMENT" :label="$t('qualityCheck.exchangeNum')" width="90">
        </el-table-column>
        <el-table-column prop="agentsData" :label="$t('qualityCheck.checkWorker')" width="130">
        </el-table-column>
        <el-table-column prop="time" :label="$t('public.createTime')" width="170">
        </el-table-column>
        <el-table-column :label="$t('qualityCheck.taskState')" width="130">
          <template scope="scope">
            <div v-if="tableData[scope.$index].hide" class="using">{{$t('qualityCheck.using')}}</div>
            <div v-if="!tableData[scope.$index].hide" style="color:#e3746f;">{{$t('qualityCheck.stoped')}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import {getFormatDateTime} from '@/utils/m7Utils.js'
  import Affix from '../../ui-modules/affix/Affix.vue'
  import Pagination from '@/components/public-modules/card/Pagination'
  export default {
    name: 'qualityCheckTask',
    data () {
      return {
        agentOptions: [],
        qualityCheckTaskloading: false,
        pickerOptions2: {
          shortcuts: [{
            text: this.$t('sms.thisOneWeek'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisOneMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisThreeMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        ruleForm: {
          date: '',
          QA_SPECIALIST: '',
          hide: ''
        },
        currentPage: 1,
        pageSize: 10,
        tableLoading: false,
        agents: [],
        restaurants: []
      }
    },
    methods: {
      reset () {
        for (let i in this.ruleForm) {
          this.ruleForm[i] = ''
        }
      },
      query () {
        let data = {'pageSize': this.pageSize, 'page': this.currentPage}
        let notifyTime = this.ruleForm.date
        if (notifyTime) {
          if (notifyTime[0]) {
            data.BEGIN_TIME = getFormatDateTime(notifyTime[0])
          }
          if (notifyTime[1]) {
            data.END_TIME = getFormatDateTime(notifyTime[1])
          }
        }
        data.hide = this.ruleForm.hide
        // let QASPECIALISTExchange = this.ruleForm.QA_SPECIALIST
        // let agentsDatas = this.agents
        // let QASPECIALISTId = ''
        // for (let k in agentsDatas) {
        //   if (agentsDatas[k].displayName === QASPECIALISTExchange) {
        //     QASPECIALISTId = agentsDatas[k]._id
        //   }
        // }
        data.QA_SPECIALIST = this.ruleForm.QA_SPECIALIST
        this.tableLoading = true
        this.$store.dispatch('getQualityTaskTemplateList', data).then(() => {
          this.tableLoading = false
        })
      },
//      分页查询
      handleCurrentChange (val) {
        this.currentPage = val
        this.query()
      },
//      查询按钮
      queryBtn () {
        this.currentPage = 1
        this.query()
      },
//      质检专员联想搜索==============================
      querySearch (queryString, cb) {
        var restaurants = this.restaurants
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter (queryString) {
        return (restaurant) => {
          return (restaurant.value.indexOf(queryString.toLowerCase()) === 0)
        }
      },
      loadRestaurants () {
        let data = []
        let agentsDatas = this.agents
        for (let k in agentsDatas) {
          data.push({value: agentsDatas[k].displayName})
        }
        return data
      }
//      ==============================================
    },
    computed: {
      // 判断是否为过滤座席 返回座席下拉数据
      selectAgents () {
        if (this.$store.getters.userHidden === 'yes') {
          return this.$store.getters.filterStopAgents && this.$store.getters.filterStopAgents.map(agent => ({ label: `${agent.displayName}[${agent.exten}]`, value: agent._id }))
        }
        return  this.agentOptions
      },
//        重构表单数据
      tableData () {
        let data = this.$store.state.qualityCheck.qualityTaskTemplate.list
        for (var i in data) {
          if (!data[i].ALREADY_MONITORING) {
            data[i].ALREADY_MONITORING = 0
          }
          if (!data[i].WAIT_MONITORING) {
            data[i].WAIT_MONITORING = 0
          }
          if (!data[i].REPLACEMENT) {
            data[i].REPLACEMENT = 0
          }
          let agentsId = data[i].query.QA_SPECIALIST
          let agentsDatas = this.agents
          for (var k in agentsDatas) {
            if (agentsDatas[k]._id === agentsId) {
              data[i].agentsData = agentsDatas[k].displayName
            }
          }
          data[i].taskAllNum = Number(data[i].ALREADY_MONITORING) + Number(data[i].WAIT_MONITORING) + Number(data[i].REPLACEMENT)
        }
        return data
      },
      count () {
        return this.$store.state.qualityCheck.qualityTaskTemplate.count
      }
    },
    components: {
      Affix,
      Pagination
    },
    beforeMount () {
      this.query()
      this.$store.dispatch('getCache', {type: 'agents'}).then(() => {
        this.agents = this.$getCache('agents')
        this.agentOptions = this.agents.map(agent => ({ label: `${agent.displayName}[${agent.exten}]`, value: agent._id }))
        // this.restaurants = this.loadRestaurants()
//        this.qualityCheckTaskloading = true
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../assets/common.styl'
  .qualityCheckTask
    height calc(100vh - 96px)
    padding 20px 20px 0
    overflow scroll
    .table-wrap
      padding-bottom 20px
      .deploy
        height 48px
        line-height 48px
        border 1px solid #e7e7eb
        border-bottom none
        padding-left 14px
        .fr
          padding-top 10px
          height 38px
    .temp-search-wrap
      display inline-block
      margin-bottom 20px
      margin-left 40px
      .el-input-time
        width 100%
      .demonstration
        display inline-block
        width 70px
        text-align left
        color $cf-gray1
    .ui-affix
      /*padding-bottom 0*/
      margin-top 20px
    .sub
      text-align right
      margin-top 20px
      .search
        margin-left 24px
  .quality-agents-select-option
    width 100%
    height auto
    word-wrap break-word
    white-space normal
  .using
    color $c-main
</style>
